<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="900"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" class="margin-top" :column="2" :size="'large'" border>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">指挥部名称</div>
        </template>
        {{ formData.name }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">所属建设单位</div>
        </template>
        {{ formData.constructorName }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">指挥者</div>
        </template>
        {{ formData.leader }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">联系电话</div>
        </template>
        {{ formData.mobile }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">指挥者身份证号</div>
        </template>
        {{ formData.cardno }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetCommanderDetail } from "@/api/admin/enterprise/index";

const formData = ref<any>({});

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "建设单位详情",
      footBtn: "",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);

watch(
  () => dialogDetail.value.visible,
  () => {
    if (dialogDetail.value.visible) {
      loading.value = true;
      GetCommanderDetail(dialogDetail.value.id)
        .then(({ data }) => {
          Object.assign(formData.value, data);
        })
        .finally(() => {
          loading.value = false;
        });
    }
  }
);

onMounted(() => {});

onUnmounted(() => {});

function sendClose(query: boolean) {
  emit("sendClose", query);
}

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  resetForm();
  sendClose(query);
}

/**
 * 重置表单
 */
function resetForm() {
  formData.id = undefined;
}
</script>

<style lang="scss" scoped>
.cell-item {
  font-size: 15px;
  //font-weight: bold;
  color: #938d8d;
}
</style>
